import React from 'react';
import { connect } from 'dva';
import createG2 from 'g2-react';
import { Button, Table, Form,Row,Col, Input, Popconfirm, Select, DatePicker ,Tabs} from 'antd';
const { RangePicker } = DatePicker;
import { baseUrl } from '../../config/system';
import BrandModal from '../../components/ledger/BrandModal';


const FormItem = Form.Item;
const TabPane = Tabs.TabPane
function AssetBrandLedger({ dispatch, assetBrandLedger, loading, form }) {

  const roomOptions = assetBrandLedger.roomList?assetBrandLedger.roomList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const typeOptions = assetBrandLedger.assetBrandList?assetBrandLedger.assetBrandList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const formItemLayout = {
    wrapperCol: { className: 'wrapper-col' },
  };
  function callback(key) {
    var formData=form.getFieldsValue();
    var objectData={};
    objectData.roomIds=formData.roomIds;
    objectData.brandIds=formData.typeIds;
    if(formData.dates!=null&&formData.dates.length>0){
      objectData.startDate=formData.dates[0];
      objectData.endDate=formData.dates[1];
    }
    dispatch({
      type: 'assetBrandLedger/queryBrandList',
      payload:{...objectData},
    });
  }
  const Pie = createG2(chart => {
    chart.col('label', {
       alias: '设备品牌'
    });
    chart.axis('value', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      formatter: function(val) {
            return (val / 1 )+"";
          },
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      title: '类型台账', // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
      tickLine: {
        lineWidth: 1,
        stroke: '#000',
        value: 5,
      }, // 坐标点对应的线，null 不显示 图形属性
      labelOffset: 16, // 标轴文本距离轴线的距离
      grid: null, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
      gridAlign: 'middle',
    });
    chart.axis('label', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      labelOffset: 16, // 标轴文本距离轴线的距离
      tickLine: null, // 坐标点对应的线，null 不显示 图形属性
      title: null, // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
    });
    chart.interval().position('label*value')
      .color('label',['#2cb7f5'])
      .label('value',{
        label: {
          fill: '#fff', //文本的颜色
          fontSize: '12', // 文本大小
        },
      })
    chart.render();
  });
  let plotCfg = {
    margin: [20, 180,80,80]
  };
    function handleGetOutEdit1(){
      var url=baseUrl+ "/dataExcel/exportAssetBrand.jhtml";
        var newWindow = window.open(url, "");
        if (!newWindow)
            return false;
        var html = "",values="";
        var formData=form.getFieldsValue();
        var objectData={};
        objectData.roomIds=formData.roomIds;
        objectData.brandIds=formData.typeIds;
        if(formData.dates!=null&&formData.dates.length>0){
          objectData.startDate=formData.dates[0];
          objectData.endDate=formData.dates[1];
        }
        if(objectData!=null&&objectData!=''){
          values=JSON.stringify(objectData);
        }
        html += "<html><head><meta content='telephone=no' name='format-detection'  charset='UTF-8'/></head><body><form id='formid' method='post' action='" + url + "'>";
        html += "<input type='hidden' name='conditionData' value='" + values + "'/>";
        html += "</form><script type='text/javascript'>document.getElementById('formid').submit();";
        html += "<\/script></body></html>".toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, "");
        newWindow.document.write(html);

        return newWindow;
    }

  const handleGetOutEdit = () => {
      let param = JSON.stringify({ ...getFieldsValue() });
      param = encodeURIComponent(param);
      window.open(baseUrl+"/dataExcel/exportAssetBrand.jhtml?param="+param);
  }

  const modalDetailProps = {
      visible: assetBrandLedger.modalVisible,
      maskClosable: false,
      dispatch: dispatch,
      detailList:assetBrandLedger.detailList,
      pageNum:assetBrandLedger.pageNum,
      pageSize:assetBrandLedger.pageSize,
      total:assetBrandLedger.total,
      roomId:assetBrandLedger.roomId,
      brandId:assetBrandLedger.brandId,
      title:'品牌明细',
      wrapClassName: 'vertical-center-modal',
      onCancel () {
        dispatch({
            type: 'assetBrandLedger/hideModal',
        })
      },
  }

  const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    return (
      <div style={{backgroundColor:'#fff'}}>
        <div style={{minHeight:'100%'}}>
           <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'50px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
           <Form layout="inline" style={{width:'100%'}}>
           <Row gutter={16}>
              <Col span={5}>              
                <FormItem style={{ width: '100%' }}  {...formItemLayout}>
                 {getFieldDecorator('roomIds')(
                    <Select
                      mode="multiple"
                      showSearch            
                      style={{ width: '100%' }}
                      placeholder="选择机房"
                      optionFilterProp="children"
                  >
                    {roomOptions}
                 </Select>
                 )}
                </FormItem>
              </Col>
              <Col span={5}>
                <FormItem  style={{ width: '100%' }}{...formItemLayout}>
                  {getFieldDecorator('typeIds')(
                    <Select
                      showSearch
                      mode="multiple"
                      style={{ width: '100%' }}
                      placeholder="选择品牌"
                      optionFilterProp="children"
                    >
                    {typeOptions}
                  </Select>
                  )}
                </FormItem>
              </Col>             
              <Col span={5}>
                <FormItem style={{ width: '100%' }} {...formItemLayout}>
                {getFieldDecorator('dates')(
                    <RangePicker style={{ width: '100%' }} format="YYYY-MM-DD" />
                )}
                </FormItem>
              </Col>
              <Col span={4}></Col>
              <Col span={5} style={{ textAlign:'right'}}>
                <FormItem>
                <Button type="primary" size='large' onClick={callback.bind(this,0)}  icon="search">查询</Button>
                </FormItem>             
                <FormItem>
                <Button size="large" onClick={handleGetOutEdit} icon="download" >导出</Button>
                </FormItem>               
              </Col>
          </Row>
         
          </Form>
          </div>
            <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'20px',paddingRight:'20px'}}>
            <Tabs onChange={callback}  type="card">
             <TabPane tab={'列表'}  key="table">
               <Table
                 columns={assetBrandLedger.brandColumnsList}
                 dataSource={assetBrandLedger.brandList}
                 pagination={false}
                 rowKey={record => record.id_}
                 loading={assetBrandLedger.brandLoading}
                 scroll={{ x:assetBrandLedger.brandWidth,}}
               />
             </TabPane>
             <TabPane tab={'图表'}  key="echart">
              <Pie key={new Date().valueOf()} data={assetBrandLedger.chartData}  height={600} plotCfg={plotCfg} forceFit={true}/>
             </TabPane>
           </Tabs>
            </div>
            <BrandModal {...modalDetailProps} />
       </div>
     </div>
  );
}

function mapStateToProps(state) {
  return { assetBrandLedger : state.assetBrandLedger};
}

AssetBrandLedger = Form.create()(AssetBrandLedger);

export default connect(mapStateToProps)(AssetBrandLedger);
